<template>
	<view class="container">
		<view class="row b-b">
			<text class="tit">商店名：</text>
			<input class="input" type="text" v-model="formParams.name" placeholder="商店名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">营业时间：</text>
			<input class="input" type="text" v-model="formParams.storeTime" placeholder="周一~周五 09:00~23:00" placeholder-class="placeholder" />
		</view>
		<view class="row b-b" @click="showAddrPicker = true">
			<text class="tit">地理位置：</text>
			<input class="input" type="text" v-model="formParams.posName" placeholder="地理位置" placeholder-class="placeholder" />
		</view>
		<view class="row b-b" @tap="toGeo" v-if="formParams.posName !== ''">
			<text class="tit">详细地址：</text>
			<input class="input" type="text" v-model="formParams.posAddress" placeholder="详细地址" placeholder-class="placeholder" disabled />
			<u-icon name="map"></u-icon>
		</view>
		<view class="row b-b">
			<text class="tit">商店公告：</text>
			<input class="input" type="text" v-model="formParams.notice" placeholder="商店介绍" placeholder-class="placeholder" />
		</view>
		<view class="pic b-b">
			<text class="tit">商店主图</text>
			<u-upload
					accept="video"
					compressed
					:maxDuration="60"
					:fileList="mainImage"
					@afterRead="mainSelect"
					@delete="mainDelete"
					name="file"
					multiple
					:maxCount="1"
				></u-upload>
		</view>
		<view class="pic b-b">
			<view class="tit">商店展示图</view>
			<u-upload
					:fileList="subImages"
					@afterRead="subSelect"
					@delete="subDelete"
					name="file"
					multiple
					:maxCount="4"
					:previewFullImage="true"
					accept="image"
				></u-upload>
		</view>
		<view class="pic b-b">
			<text class="tit">安全证图</text>
			<u-upload
					accept="image"
					:fileList="security"
					@afterRead="seSelect"
					@delete="seDelete"
					name="file"
					multiple
					:maxCount="4"
					:previewFullImage="true"
				></u-upload>
		</view>
		<u-gap height="80" bg-color="#fff"></u-gap>
		<button @tap="submit" type="primary">提交</button>
		<address-picker :show="showAddrPicker" @confirm="confirmAddr" @cancel="cancelAddr"></address-picker>
	</view>
</template>
<script>
import config from '@/config.js'
import {apiAddStore} from '@/api/store.js'
import {apiUploadImg,apiUploadImgs} from '@/api/file.js'
export default {
	data() {
		return {
			showAddrPicker:false,
			ableClick:false,
			imageStyles:{
				width:64,
				height:64,
				border:{
					color:"#a5a5a5",
					width:2,
					style:'dashed',
					radius:'2px'
				}
			},
			formParams:{
				name:'',
				storeName:'',
				posName:'',
				posAddress:'',
				storeTime:'',
				notice:'',
				mainImage:'',
				subImages:'',
				security:'',
				latitude:'',
				longitude:''
			},
			location:{
				latitude:'',
				longitute:'',
				name:"",
				address:'',
			},
			// 用来保存上面上传图片的信息
			mainImage:[],
			security:[],
			subImages:[],
			headers:{
				Authorization: this.$store.getters.token
			}
		}
	},
	methods: {
		confirmAddr(e){
			this.formParams.posName = e.value[0] + ' ' + e.value[1] + ' ' + e.value[2]
			this.showAddrPicker = false
		},
		cancelAddr(){
			this.showAddrPicker = false
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				apiUploadImg({name:'file',filePath:url}).then(res=>{
					resolve(res)
				})
			})
		},
		// 三个图片上传的方法
		async mainSelect(event){
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this.mainImage.length
			lists.map((item) => {
				this.mainImage.push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this.mainImage[fileListLen]
				this.mainImage.splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result.url
				}))
				fileListLen++
			}
		},
		mainDelete(event) {
			this.mainImage = []
		},
		async subSelect(event){
			// 可在此处进行图片的压缩
			let lists = [].concat(event.file)
			let fileListLen = this.subImages.length
			lists.map((item) => {
				this.subImages.push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this.subImages[fileListLen]
				this.subImages.splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result.url
				}))
				fileListLen++
			}
		},
		subDelete(event) {
			this.subImages.splice(event.index, 1)
		},
		async seSelect(event){
			// 可在此处进行图片的压缩
			let lists = [].concat(event.file)
			let fileListLen = this.security.length
			lists.map((item) => {
				this.security.push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this.security[fileListLen]
				this.security.splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result.url
				}))
				fileListLen++
			}
		},
		seDelete(event) {
			this.security.splice(event.index, 1)
		},
		toGeo(){
			let _that = this
			uni.chooseLocation({
				keyword:this.formParams.posName,
				success:function(res){
					// _that.formParams.posName = res.name
					_that.formParams.posAddress = res.address
					_that.formParams.latitude = res.latitude
					_that.formParams.longitude = res.longitude
				}
			})
		},
		submit() {
			if(this.mainImage.length > 0){
				this.formParams.mainImage = this.mainImage[0].url
			}
			if(this.subImages.length > 0){
				this.subImages.map(item=>{
					if(!this.formParams.subImages){
						this.formParams.subImages = item.url
					}else{
						this.formParams.subImages = this.formParams.subImages + ';' + item.url
					}
				})
			}
			if(this.security.length > 0){
				this.security.map(item=>{
					if(!this.formParams.security){
						this.formParams.security = item.url
					}else{
						this.formParams.security = this.formParams.security + ';' + item.url
					}
				})
			}
			let params = JSON.parse(JSON.stringify(this.formParams))
			apiAddStore(params).then(res=>{
				this.$modal.msg(res.msg)
				
			}).catch(err=>{
				this.$modal.msg('当前用户已注册过店铺')
			})
		},
	}
}
</script>
<style lang="scss" scoped>
page{
	background: #f8f8f8;
	padding-top: 16upx;
}
.newAddImg{
	border: 1px solid black;
}
.pic{
	// display: flex;
	// background-color: #fff;
	// align-items: center;
	// justify-content: flex-start;
	padding:0 30upx ;
	background-color: #fff;
	.tit{
		width: 140upx;
	}
}
.row{
	display: flex;
	align-items: center;
	position: relative;
	padding:0 30upx;
	height: 110upx;
	background: #fff;
	// border-bottom: 1px solid #c8ccd4;
	
	.tit{
		flex-shrink: 0;
		width: 160upx;
		font-size: 30upx;
		color: #303133;
	}
	.input{
		flex: 1;
		font-size: 30upx;
		color: #303133;
	}
	.icon-shouhuodizhi{
		font-size: 36upx;
		color: #909399;
	}
}
.default-row{
	margin-top: 16upx;
	.tit{
		flex: 1;
	}
	switch{
		transform: translateX(16upx) scale(.9);
	}
}
.add-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 60upx auto;
	font-size: 32upx;
	color: #fff;
	background-color: #ecdd00;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 100, 96, 0.4);
}
</style>